import React from 'react';
import { observer } from 'mobx-react';
import {WeaDialog,WeaLocaleProvider,WeaTable } from 'ecCom';
import cloneDeep from 'lodash/cloneDeep';
import {toJS} from 'mobx'
const getLabel = WeaLocaleProvider.getLabel;

/**
* 
*/
@observer
class AccountModal extends React.Component {
	constructor(props) {
        super(props);

        this.state = {
          selectedRowKeys:[]
        };
  }

  componentDidMount(){
    
  }

  componentWillReceiveProps(nextProps) {
    const { resetAccountData } = this.props;
    const { visible } = nextProps;
    if(!this.props.visible && visible){

    } else if(this.props.visible && !visible){
      resetAccountData();
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
      return true;
  }

  componentWillUnmount() {
    //组件卸载时一般清理一些状态
    const { resetAccountData } = this.props;
    resetAccountData();
  }

	render(){
    const {visible,accountColumns,accountDataSource} = this.props;

		return(
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@02qoyg`}
              icon='icon-coms-Finance'
              iconBgcolor='#f14a2d'
			        title={getLabel(24427,'账套')}
			        visible={visible}
			        style={{width:600,height:400}}
              maskClosable={false}
              onCancel={this.handleCancel}
        			buttons={this.getBottomButton()}
              moreBtn={{datas:this.getRightMenu(),collectParams:{favname:getLabel(24427,'账套'), favouritetype:5}}}
		    >
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@srhyyk`} 
              //className={'weaver-fna-common-tablelist'}
              columns={accountColumns} 
              dataSource={accountDataSource}
              onRowClick={(record,index)=>{
                this.props.rowClick({accountIds:record.accountId,approvalIds:record.approvalId});
              }}
              pagination={false}
              // rowSelection={{onChange:(selectedRowKeys, selectedRows) => {
              //   this.setState({selectedRowKeys:selectedRowKeys});
              //   console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
              // }}}
            />
   			</WeaDialog>
		)
	}

  //右下角点击按钮
  getBottomButton = () => {
    let buts=[];
    //buts.push(getPrimaryButton(this.doSearCh,false,getLabel(197,'搜索')));

    return buts;
  }
  
  //右键菜单
  getRightMenu = () => {
    let buts = [];
    // buts.push({
    //   key:"search",
    //   icon: <i className='icon-coms-search'/>,
    //   disabled:false,
    //   content:getLabel(197,'搜索'),
    //   onClick:()=>{this.doSearCh();}
    // });

    return buts;
  }
  
  doSearCh = () => {
    const {selectedRowKeys} = this.state;
    const {accountDataSource} = this.props;

    let selects = selectedRowKeys.join(',');
		if(!selects){//没有勾选就不查询
			//fnaWarningTip(getLabel(505669,'请选择查询的条件'));
            return '';
    }
    
    let accountDataSourceTemp = cloneDeep(toJS(accountDataSource));

    let accountIds = [];
    let approvalIds = [];
    for(let rowKey of selectedRowKeys){
      /**
       * accountId 1 approvalIds a,b
       * accountId 2 approvalIds c
       * 
       * return 1_2  a,b_c
       */
      accountDataSourceTemp.map((item,index)=>{
        if(item['key'] == rowKey){
          let accountId = item['key'].accountId;
          accountIds.push(accountId);
          let approvalId = item['key'].approvalId;
          approvalIds.push(approvalId);
         }
      });
    }

    this.props.rowClick({accountIds:accountIds.join('_'),approvalIds:approvalIds.join('_')});
  }

  //取消
  handleCancel = () => {
    const {close} = this.props;
    close();
  }
}

export default AccountModal;